<script setup lang="ts">
import { ref, reactive } from "vue";
import Motion from "../utils/motion";
import { message } from "@/utils/message";
import { updateRules } from "../utils/rule";
import type { FormInstance } from "element-plus";
import { useVerifyCode } from "../utils/verifyCode";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "~icons/ep/iphone";
import Lock from "~icons/ri/lock-fill";
import Keyhole from "~icons/ri/shield-keyhole-line";
import { useUserStoreHook } from "@/store/modules/user";

const loading = ref(false);
const userStore = useUserStoreHook();
const form = reactive({
  phone: "",
  verifyCode: "",
  password: "",
  confirmPassword: ""
});
const formRef = ref<FormInstance | null>(null);
const rules = updateRules(form);
const { isDisabled, text, start, end } = useVerifyCode({
  scene: "login",
  resolvePhone: () => form.phone
});

const sendCode = () => {
  start(formRef.value ?? undefined, "phone", 60);
};

const onSubmit = async () => {
  if (!formRef.value) return;
  const valid = await formRef.value.validate().catch(() => false);
  if (!valid) return;
  loading.value = true;
  setTimeout(() => {
    message("重置功能开发中", { type: "info" });
    loading.value = false;
  }, 500);
};

const onBack = () => {
  end();
  userStore.SET_CURRENTPAGE(0);
};
</script>

<template>
  <el-form ref="formRef" :model="form" :rules="rules" size="large">
    <Motion>
      <el-form-item prop="phone">
        <el-input
          v-model="form.phone"
          clearable
          placeholder="请输入手机号"
          :prefix-icon="useRenderIcon(Iphone)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="80">
      <el-form-item prop="verifyCode">
        <div class="w-full flex justify-between">
          <el-input
            v-model="form.verifyCode"
            clearable
            placeholder="请输入短信验证码"
            :prefix-icon="useRenderIcon(Keyhole)"
          />
          <el-button :disabled="isDisabled" class="ml-2!" @click="sendCode">
            {{ text.length > 0 ? `${text}s` : "获取验证码" }}
          </el-button>
        </div>
      </el-form-item>
    </Motion>

    <Motion :delay="160">
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          clearable
          show-password
          placeholder="请设置新密码"
          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="200">
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="form.confirmPassword"
          clearable
          show-password
          placeholder="请再次输入密码"
          :prefix-icon="useRenderIcon(Lock)"
        />
      </el-form-item>
    </Motion>

    <Motion :delay="240">
      <el-form-item>
        <el-button
          class="w-full"
          size="default"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >
          提交重置
        </el-button>
      </el-form-item>
    </Motion>

    <Motion :delay="280">
      <el-form-item>
        <el-button class="w-full" size="default" @click="onBack">
          返回
        </el-button>
      </el-form-item>
    </Motion>
  </el-form>
</template>

<style scoped>
.code-row {
  display: flex;
  justify-content: space-between;
}
</style>
